<template>
    <div>
        <el-row style="margin-bottom:20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>新闻动态</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==1">新闻列表</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==2">新增新闻</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==3">修改新闻</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==4">新闻预览</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==4">{{previewForm.title}}</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>

        <!--新闻列表-->
        <el-row v-show='showPage==1'>
            <!--按钮+搜索-->
            <el-row :gutter="10">
                <el-col :span='3'>
                    <el-button type="primary" size="small" @click='addNews'>新增新闻</el-button>
                </el-col>
                <el-col :span='3' :offset="1">
                    <el-input size="small" placeholder="请输入标题" style='width:100%' suffix-icon="el-icon-search" :clearable='true' @clear="cleanKey" v-model="table.title" @keyup.enter.native="queryKey"></el-input>
                </el-col>

                <el-col :span="3">
                    <el-select v-model.number="table.newsType" clearable placeholder="新闻类型" size='small' @change='newsTypeChange'>
                        <el-option v-for="item in table.newsTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>

                <el-col :span="3">
                    <el-select v-model.number="table.newsState" clearable placeholder="新闻状态" size='small' @change='newsStateChange'>
                        <el-option v-for="item in table.newsStateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
            </el-row>

            <!--表格-->
            <el-row style="margin-top:10px">
                <el-table :data='table.tableData' border stripe style="width:100%" size="small" :highlight-current-row="true" ref="multipleTable">
                    <el-table-column label="编号" prop='newsId' min-width="100"></el-table-column>
                    <el-table-column label="标题" prop='title' min-width="250"></el-table-column>
                    <el-table-column label="来源" prop='origin' min-width="150"></el-table-column>
                    <el-table-column label="类型" min-width="150">
                        <template slot-scope="scope">
                            <span v-if='scope.row.newsType==1'>公司动态</span>
                            <span v-if='scope.row.newsType==2'>行业资讯</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" min-width="150">
                        <template slot-scope="scope">
                            <el-tag type="info" v-if='scope.row.newsState==0'>新创建</el-tag>
                            <el-tag type="danger" v-if='scope.row.newsState==1'>待修改</el-tag>
                            <el-tag v-if='scope.row.newsState==2'>待审核</el-tag>
                            <el-tag v-if='scope.row.newsState==3' type="success">已发布</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop='createTime' min-width="150"></el-table-column>
                    <el-table-column label="发布时间" prop='publishTime' min-width="150"></el-table-column>
                    <el-table-column label='操作' min-width='200'>
                        <template slot-scope="scope">
                            <el-button type="text" v-if='scope.row.newsState==0||scope.row.newsState==1' @click="toModify(scope.row)">修改</el-button>
                            <el-button type="text" v-if='scope.row.newsState==0||scope.row.newsState==1' @click="toVerify(scope.row)">提交</el-button>
                            <el-button type="text" v-if='scope.row.newsState==0||scope.row.newsState==1' @click="toDelete(scope.row)">删除</el-button>

                            <el-button type="text" v-if='scope.row.newsState==2' @click="toPublish(scope.row)">发布</el-button>
                            <el-button type="text" v-if='scope.row.newsState==2' @click="toReject(scope.row)">驳回</el-button>

                            <el-button type="text" v-if='scope.row.newsState==3' @click="unPublish(scope.row)">取消发布</el-button>

                            <el-button type="text" @click="toPreview(scope.row)">预览</el-button>
                        </template>
                        
                    </el-table-column>
                </el-table>
                <!--分页条-->
                 <el-pagination style="margin-top:10px; text-align:right" @current-change="currentChangeHandle" :current-page="table.currentPage"
                :page-size="table.pageSize" layout="total, prev, pager, next, jumper" :total="table.rowCount"></el-pagination>
            </el-row>
        </el-row>
        
        <!--新增新闻-->
        <el-row v-show='showPage==2 || showPage==3'>
            <el-row>
                <el-col :span='3'>
                    <el-button type="primary" size="small" @click='addBack'>返回列表</el-button>
                </el-col>
            </el-row>
            <el-form style="margin-top:10px;" label-position='right' label-width='80px' :model='addForm'
            ref='addForm' size='small' :rules='addForm.rules'>
                <el-form-item label="标题" prop='title'>
                    <el-input style="width:500px;" v-model="addForm.title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="来源" prop='origin'>
                    <el-input style="width:200px;" v-model="addForm.origin" placeholder="请输入来源"></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="newsType">
                    <el-select v-model.number="addForm.newsType" placeholder="请选择类型" size='small' style="width:200px;">
                                <el-option v-for='item in table.newsTypeList' :key='item.value' :label='item.label' :value='item.value'></el-option>
                            </el-select>
                </el-form-item>
                <el-form-item label='发布时间' prop="publishTime">
                        <el-date-picker  style="width:200px;" 
                        v-model="addForm.publishTime" type="datetime" placeholder="选择日期时间" 
                        :editable='false' value-format='yyyy-MM-dd HH:mm:ss' format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </el-form-item>
                <el-form-item label='正文' prop='content'>
                    <vue-ueditor-wrap v-model="addForm.content" :config="addForm.editorConfig"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('addForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-row>

        <!--预览-->
        <el-row v-show='showPage==4'>
             <el-row>
                <el-col :span='3'>
                    <el-button type="primary" size="small" @click='addBack'>返回列表</el-button>
                </el-col>
            </el-row>
            <el-row>
                <div class='preview-div' v-html='previewForm.content'>
                </div>
            </el-row>
        </el-row>

    </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import conf from '@/utils/conf.js'

var moment = require('moment');
export default {
    
    data(){
        return {
            showPage: 1,
            table: {
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                rowCount: 0,
                title: '',
                newsState: '',
                newsType: '',
                newsStateList: [
                    {label:"新创建",value:0},
                    {label:"待修改",value:1},
                    {label:"待审核",value:2},
                    {label:"已发布",value:3},
                ],
                newsTypeList: [
                    {label:"公司动态",value:1},
                    {label:"行业资讯",value:2},
                ]
            },
            addForm: {
                isCreate: '',
                newsId: '',
                title: '',
                origin: '',
                newsType: '',
                publishTime: '',
                content: '',
                editorConfig: {
                    // 编辑器自动被内容撑高
                    autoHeightEnabled: true,
                    // 初始容器高度
                    initialFrameHeight: 450,
                    // 初始容器宽度
                    initialFrameWidth: '1000',
                    // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                    // serverUrl: 'http://35.201.165.105:8000/controller.php',
                    serverUrl: conf.baseUrl() + '/UEditor',
                    // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                    UEDITOR_HOME_URL: conf.ueditorConf()
                },
                rules: {
                    title: [
                        {required: true, message: '请填写标题', trigger: 'blur'}
                    ],
                    origin: [
                        {required: true, message: '请填写来源', trigger: 'blur'}
                    ],
                    newsType: [
                        {
                            required: true,
                            message: '请选择类型',
                            trigger: 'blur,change',
                            type: 'number'
                        }
                    ],
                    content: [
                        {required: true, message: '请填写正文', trigger: 'blur'}
                    ],
                    publishTime: [
                        {required: true, message: '请选择发布时间', trigger: 'blur,change'}
                    ]
                },

            },

            previewForm: {
                newsId: '',
                title: '',
                origin: '',
                newsType: '',
                content: '',
            }

        }
    },
    components: {
        VueUeditorWrap
    },

    methods: {
        getTableData(){
            let p = {};
            let url = '/api/news/list';
            p.start = (this.table.currentPage - 1) * this.table.pageSize;
            p.num = this.table.pageSize;
            p.title = this.table.title;
            p.newsState = this.table.newsState;
            p.newsType = this.table.newsType;
            this.$http.fetch(url, p)
                .then(res => {
                    this.table.tableData = res.data.rows;
                    this.table.rowCount = res.data.total;
                })
        },
        cleanKey(){
            this.table.currentPage = 1;
            this.table.queryKey = '';
            this.getTableData();
        },
        queryKey(){
            this.table.currentPage = 1;
            this.getTableData();
        },
        newsStateChange(value){
            this.table.newsState = value;
            this.table.currentPage = 1;
            this.getTableData();
        },
        newsTypeChange(value){
            this.table.newsType = value;
            this.table.currentPage = 1;
            this.getTableData();
        },

        //翻页
        currentChangeHandle(currentPage) {
            this.table.currentPage = currentPage;
            this.getTableData();
        },

        //提交审核
        toVerify(row){
            this.$confirm('确定提交审核吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                })
            .then(() => {
                let p = {};
                let url = '/api/news/verify';
                p.newsId = row.newsId
                return this.$http.fetch(url, p)
            })
            .then(()=>{
                this.getTableData();
            })
            .catch(()=>{

            })
        },


        //删除
        toDelete(row){
            this.$confirm('确定删除该新闻吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                })
            .then(() => {
                let p = {};
                let url = '/api/news/delete';
                p.newsId = row.newsId
                return this.$http.fetch(url, p)
            })
            .then(()=>{
                this.getTableData();
            })
            .catch(()=>{

            })
        },

        //发布
        toPublish(row){
            this.$confirm('确定发布该新闻吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                })
            .then(() => {
                let p = {};
                let url = '/api/news/publish';
                p.newsId = row.newsId
                return this.$http.fetch(url, p)
            })
            .then(()=>{
                this.getTableData();
            })
            .catch(()=>{

            })
        },

        //驳回
        toReject(row){
            this.$confirm('确定驳回该新闻吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                })
            .then(() => {
                let p = {};
                let url = '/api/news/reject';
                p.newsId = row.newsId
                return this.$http.fetch(url, p)
            })
            .then(()=>{
                this.getTableData();
            })
            .catch(()=>{

            })
        },

        //取消发布
        unPublish(row){
            this.$confirm('确定取消发布该新闻吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                })
            .then(() => {
                let p = {};
                let url = '/api/news/unPublish';
                p.newsId = row.newsId
                return this.$http.fetch(url, p)
            })
            .then(()=>{
                this.getTableData();
            })
            .catch(()=>{

            })
        },

        //预览
        toPreview(row){
            let p = {};
            let url = '/api/news/get';
            p.newsId = row.newsId;
            this.$http.fetch(url, p)
            .then(res=>{
                this.previewForm.newsId = res.data.newsId;
                this.previewForm.title = res.data.title;
                this.previewForm.origin = res.data.origin;
                this.previewForm.newsType = res.data.newsType;
                this.previewForm.content = res.data.content;
                this.showPage = 4;
            })
        },

        //新增
        addNews(){
            
            this.addForm.title = '';
            this.addForm.origin = '';
            this.addForm.newsType = '';
            this.addForm.content = '';
            this.addForm.publishTime = '';

            this.$refs['addForm'].clearValidate();
            this.addForm.isCreate = true;
            this.showPage = 2;
        },

        addBack(){
            this.showPage = 1;
        },

        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if(valid){
                    let p = {};
                    let url = '';
                    if(!this.addForm.isCreate){
                        p.newsId = this.addForm.newsId;
                        url = '/api/news/modify';
                    }else{
                        url = '/api/news/add';
                    }
                    p.title = this.addForm.title;
                    p.origin = this.addForm.origin;
                    p.newsType = this.addForm.newsType;
                    p.content = this.addForm.content;
                    console.log(this.addForm.publishTime)
                    let publishTime = this.addForm.publishTime;
                    let time = moment(publishTime).format("YYYY-MM-DD HH:mm:ss");
                    console.log(time)
                    p.publishTime = time;
                    this.$http.fetch(url, p)
                    .then(res=>{
                        this.getTableData();
                        this.showPage = 1;
                    })
                }
            });
        },

        //修改
        toModify(row){
            let p = {};
            let url = '/api/news/get';
            p.newsId = row.newsId;

            let time = moment(row.publishTime);
            console.log(time);
            let ll = time.valueOf()
            console.log(ll)
            let dd = new Date(ll);
            console.log(dd)

            this.$http.fetch(url, p)
            .then(res=>{
                this.addForm.newsId = res.data.newsId;
                this.addForm.title = res.data.title;
                this.addForm.origin = res.data.origin;
                this.addForm.newsType = res.data.newsType;
                this.addForm.publishTime = dd;
                this.addForm.content = res.data.content;

                this.$refs['addForm'].clearValidate();
                this.addForm.isCreate = false;
                this.showPage = 3;
            })
        },

       
    },
    mounted(){
        this.getTableData();
    }

}
</script>

<style scoped>
.preview-div{
    width: 1000px;
    background-color: #ffffff;
    margin-top:10px;
}
</style>